<!-- 银行卡 -->
<template>
	<view class="GridBankCard">
		<!-- 输入部分 -->
		<u-form :model="params" :rules="rules" ref="uForm">
			<view class="input f-background radius20 margin-bottom-20">
				<picker mode="selector" :range="bankList" range-key="bankName" :value="bankIndex" @change="onBanks">
					<u-form-item required label="银行名称" prop="bankName" ref="bankName" labelWidth="158rpx">
						<u--input readonly v-model="params.bankName" class="size-28 color3"
							placeholder-class="building-plac" type="text" border="none" placeholder="请选择银行"></u--input>
						<text slot="right" class="iconfont icon-right-1-copy color9 size-30"></text>
					</u-form-item>
				</picker>
				<u-form-item required label="银行卡号" prop="bankCarNum" ref="bankCarNum" labelWidth="158rpx">
					<u--input @blur="onBankCardInput" v-model="params.bankCarNum" class="size-28 color3"
						placeholder-class="building-plac" type="text" border="none" placeholder="请输入银行卡号"></u--input>
				</u-form-item>
				<u-form-item required label="所属支行" prop="subbranchName" ref="subbranchName" labelWidth="158rpx">
					<u--input v-model="params.subbranchName" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请输入所属支行"></u--input>
				</u-form-item>
				<picker mode='multiSelector' :value="multiSelectorValue" :range="infoBankList" range-key="remarks"
					@columnchange="onSelectAddress" @change="onChange">
					<u-form-item required label="开户地址" prop="areaName" ref="areaName" labelWidth="158rpx">
						<u--input readonly v-model="params.areaName" class="size-28 color3"
							placeholder-class="building-plac" type="text" border="none"
							placeholder="请选择开户地址"></u--input>
						<text slot="right" class="iconfont icon-right-1-copy color9 size-30"></text>
					</u-form-item>
				</picker>
				<u-form-item required label="预留号码" prop="telPhone" ref="telPhone" labelWidth="158rpx">
					<u--input v-model="params.telPhone" class="size-28 color3" maxlength="11"
						placeholder-class="building-plac" type="text" border="none" placeholder="请输入银行预留手机号"></u--input>
				</u-form-item>
			</view>
			<view class="input f-background radius20 margin-bottom-20" v-if="infoBankBool">
				<u-form-item required label="真实姓名" prop="name" ref="name" labelWidth="158rpx">
					<u--input v-model="params.name" class="size-28 color3" placeholder-class="building-plac" type="text"
						border="none" placeholder="请输入真实姓名"></u--input>
				</u-form-item>
				<u-form-item required label="身份证号" prop="carId" ref="carId" labelWidth="158rpx">
					<u--input v-model="params.carId" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>
				<view class="information text-align">
					<SingleUpload @afterRead="$event => params.carFore = $event" @delete="params.carFore = ''" />
					<view class="information-margin color6 size-30">点击上传身份证正面</view>
					<SingleUpload @afterRead="$event => params.carBack = $event" @delete="params.carBack = ''"
						img="fan.png" />
					<view class="information-margin color6 size-30">点击上传身份证背面</view>
				</view>
			</view>
			<view class="poflb width100 inset-bottom f5-background">
				<view class="save dis">
					<u-button :disabled="disabled" type="primary"
						:customStyle="{width: '690rpx',height: '96rpx',borderRadius: '12rpx',margin: '0 auto'}"
						color="#EB0000" @click="onSubmit">
						<text class="color-f font-weight-600 size-34">验证并使用</text>
					</u-button>
				</view>
			</view>
		</u-form>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { AddOrUpdate, GetBank, GetBySuperiorCode, GetList } from "@/api/index"
	import SingleUpload from "@/components/single-upload/single-upload"
	export default {
		components: {
			SingleUpload
		},
		data() {
			return {
				disabled: false,
				borderErr: false, // 校验失败的时候 才显示边框
				bankIndex: 0,
				bankList: [],
				rules: {
					bankName: {
						type: 'string',
						required: true,
						message: '请选择银行',
						trigger: ['blur', 'change']
					},
					bankCarNum: {
						type: 'string',
						required: true,
						message: '请输入银行卡号',
						trigger: ['blur', 'change']
					},
					subbranchName: {
						type: 'string',
						required: true,
						message: '请输入所属支行',
						trigger: ['blur', 'change']
					},
					areaName: {
						type: 'string',
						required: true,
						message: '请选择开户地址',
						trigger: ['blur', 'change']
					},
					carId: {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					name: [{
						type: 'string',
						required: true,
						message: '请输入真实姓名',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[a-zA-Z\u4e00-\u9fa5]{1,10}$/,
						transform(value) {
							return String(value);
						},
						message: '1-10位中文或英文，不包含数字和符号',
						trigger: ['blur', 'change']
					}],
					telPhone: [{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(13|14|15|16|17|18|19)\d{9}$/,
						transform(value) {
							return String(value);
						},
						message: '以13、14、15、16、17、18、19开头的11位数字',
						trigger: ['blur', 'change']
					}],
				},
				params: {
					bankCode: '', // 银行编号
					bankName: '', // 银行名称
					bankCarNum: '', // 银行卡号
					subbranchName: '', // 所属支行
					areaName: '', //  开户地址
					areaCode: '', // 开户地址id
					telPhone: '', //  预留号码
					name: '', //  真实姓名
					carId: '', //  身份证号
					carFore: '', //  身份证正面
					carBack: '', //  身份证反面
				},
				multiSelectorValue: [0, 0, 0],
				infoBankList: [],
				infoBank: {},
				infoBankBool: false
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			console.log('optionsoptionsoptionsoptions', options)
			this.getGetBank()
			this.postGetBySuperiorCode()
			this.postGetList()
		},
		methods: {
			// 银行信息
			async postGetList() {
				const { code, data } = await GetList()
				if (code == '200') {
					this.bankList = data
				}
			},
			// 银行卡地区
			async postGetBySuperiorCode(id) {
				const { code, data } = await GetBySuperiorCode({ code: id || 0 })
				if (code == '200') {
					if (!id) {
						this.infoBankList = [data, data[this.multiSelectorValue[1]].subset]
						this.postGetBySuperiorCode(data[this.multiSelectorValue[1]].subset[0].dictCode)
					} else this.$set(this.infoBankList, 2, data)
				}
			},
			// 绑定详情
			async getGetBank() {
				const { code, data } = await GetBank()
				if (code == '200') {
					console.log(data)
					this.infoBankBool = data ? false : true
					if (data) this.params = data
				}
			},
			// 新增编辑绑定
			async postAddOrUpdate() {
				this.disabled = true
				const { code, data } = await AddOrUpdate(this.params)
				if (code == '200') {
					uni.$u.toast('操作成功', 900)
					setTimeout(() => {
						uni.navigateBack({})
					}, 1000)
				} else this.disabled = false
			},
			// 选择地址
			onSelectAddress(e) {
				console.log(e.detail)
				const { column, value } = e.detail
				if ([0, 1].includes(column)) { // 第一行
					if (column == 0) {
						this.$set(this.infoBankList, 1, this.infoBankList[column][value].subset)
					}
					this.postGetBySuperiorCode(this.infoBankList[1][column == 0 ? 0 : value].dictCode)
				}
			},
			// 选择地址确定
			onChange(e) {
				console.log(e.detail.value)
				const { value } = e.detail
				const { multiSelectorValue } = this
				console.log('this.infoBankList', this.infoBankList, multiSelectorValue)
				this.params.areaCode = this.infoBankList[2][value[2]].dictCode
				this.params.areaName = this.infoBankList[2][value[2]].remarks
				this.$refs.uForm.clearValidate('areaName');
			},
			// 银行卡输入
			onBankCardInput() {
				const split = this.params.bankCarNum.split(' ')
				this.params.bankCarNum = split.join('')
			},
			onBanks(e) {
				const { value } = e.detail
				this.bankIndex = value * 1
				this.params.bankName = this.bankList[value * 1].bankName
				this.params.bankCode = this.bankList[value * 1].bankCode
				console.log('this.bankList[value * 1].bankCode',this.bankList[value * 1].bankCode)
				this.$refs.uForm.clearValidate('bankName');
			},
			onSubmit() {
				console.log(this.params,this.infoBankBool)
				let _this = this
				const { params } = this
				this.$refs.uForm.validate().then(res => {
					if (!params.carFore && _this.infoBankBool || !params.carBack && _this.infoBankBool) {
						let tls = '点击上传身份证背面'
						if (!params.carFore) tls = '点击上传身份证正面'
						uni.$u.toast(tls, 2000)
						return
					}
					_this.postAddOrUpdate()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					_this.borderErr = true
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep.GridBankCard {
		padding: 20rpx 20rpx 188rpx;

		.save {
			height: 168rpx;
		}

		.poflb {
			z-index: 10;
		}

		// 输入部分
		.input {
			padding: 0 26rpx 0 24rpx;

			.building-plac {
				color: #BCBCBC;
			}

			.u-input__content__field-wrapper__field {
				height: 110rpx !important;
			}

			.u-form-item__body {
				border-bottom: 1px solid #F6F6F6;
			}

			.u-form-item__body__left__content__label {
				font-weight: bold;
			}

			.u-form-item__body__left__content__label,
			.u-input__content__field-wrapper__field {
				font-size: 30rpx !important;
			}
		}

		.information {
			padding-left: 16rpx;

			.information-margin {
				padding: 28rpx 0 60rpx;
			}
		}
	}
</style>